<template>
  <div class="ReadGj" :style="imgStyle1">
    <div class="Readhead" :style="imgStyle">
      <h4>关卡统计</h4>
    </div>
    <div class="ReadContent">
      <!-- 个人关卡基本信息 -->
      <div class="ReadUp">
        <div class="ReadUp-content">
          <div class="ReadUp-content1">
            <p>未完成关卡</p>
            <div class="counting">
              <span>{{ Nosuccessful }} / {{ Nosuccessful + successful }}</span>
            </div>
          </div>
          <div class="ReadUp-content2">
            <p>进行中</p>
            <div
              class="ReadUp-content2-item"
              @mouseenter="detail = true"
              @mouseleave="detail = false"
            >
              <ul v-if="PlayingItem">
                <li>关卡名称：{{ PlayingItem.customspassName }}</li>
                <li>开始时间：{{ PlayingItem.start }}</li>
                <li>截止时间：{{ PlayingItem.end }}</li>
              </ul>
              <div v-else-if="!PlayingItem">暂无进行的关卡</div>
              <div class="detail" v-show="detail">
                <i class="el-icon-more"></i>
              </div>
              <div
                class="item-status"
                :style="{
                  color:
                    PlayingItem.status == 3 || PlayingItem.status == 5
                      ? 'green'
                      : PlayingItem.status == 2 || PlayingItem.status == 4
                      ? 'red'
                      : '',
                }"
                v-text="
                  PlayingItem.status == 3
                    ? '进行中'
                    : PlayingItem.status == 2
                    ? '逾期'
                    : PlayingItem.status == 4
                    ? '等待验收'
                    : PlayingItem.status == 5
                    ? '正在验收'
                    : ''
                "
              ></div>
            </div>
          </div>
          <div class="ReadUp-content3">
            <p>已完成关卡</p>
            <div class="counting">
              <span>{{ successful }} / {{ Nosuccessful + successful }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 关卡排名信息 -->
      <div class="Readuser">
        <h5>关卡排名信息</h5>
        <div class="Readuser-p">
          <div class="ReadPerson" id="Chart-Person"></div>
          <div class="ReadStages">
            <el-switch
              v-model="value"
              active-text="关卡人数统计"
              inactive-text="阶段人数统计"
            >
            </el-switch>
            &nbsp;
            <el-select v-model="stategname" placeholder="请选择" v-if="value">
              <el-option
                v-for="(item, index) in stagedatas"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <div class="Chart-project" id="Chart-Myproject"></div>
          </div>
        </div>
      </div>
      <!-- 延期统计 -->
      <div class="Readdelay">
        <h5>延期统计</h5>
        <div class="Readdelay-project">
          <div class="Readdelay-project-left">
            <el-switch
              v-model="value1"
              active-text="按月展示"
              inactive-text="按天展示"
            >
            </el-switch>
          </div>
          <div class="Readdelay-project-right" id="Chart-delay"></div>
        </div>
      </div>
      <!-- 逾期统计 -->
      <div class="ReadOutTimes">
        <h5>逾期统计</h5>
        <div class="Readdelay-project">
          <div class="Readdelay-project-left">
            <el-switch
              v-model="value2"
              active-text="按月展示"
              inactive-text="按天展示"
            >
            </el-switch>
          </div>
          <div class="Readdelay-project-right" id="Chart-outtime"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/css/Read.css";
//按需引入echarts
const echarts = require("echarts");
import axios from "axios";
export default {
  name: "Read",
  data() {
    return {
      imgStyle: {
        backgroundImage: `url(${require("@/assets/images/count.png")})`,
      },
      imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
      },
      detail: false,
      //关卡未完成和已完成
      Nosuccessful: "",
      successful: "",
      //正在进行的关卡
      PlayingItem: "",
      //swich开关
      value: false,
      value1: true,
      value2: true,
      //阶段和关卡统计
      stategname: "",
      itemname: "",
      itemvalue: [],
      stagedatas: "",
      stagevalue: [],
      //延期统计
      delayweek: ["第一周", "第二周", "第三周", "第四周", "第五周"],
      delayday: "",
      //逾期统计
      Outtimeweek: ["第一周", "第二周", "第三周", "第四周", "第五周"],
      Outtimeday: "",
      //关卡排名总人数统计图
      allpeople: [],
      flag: false,
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          this.ItemRank(this.stategname);
          this.flag = true;
        } else {
          this.stagesRank();
          this.flag = false;
        }
      },
    },
    stategname: {
      handler(newVal, oldVal) {
        if (newVal && this.flag) {
          this.ItemRank(newVal);
        }
      },
    },
    value1: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          this.initDelayweek();
        } else {
          this.initDelayday();
        }
      },
    },
    value2: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          this.initOuttimeweek();
        } else {
          this.initOuttimeday();
        }
      },
    },
  },
  methods: {
    //关卡排名总人数统计图
    initCharts(arry) {
      let ContmyChart = echarts.init(document.getElementById("Chart-Person"));
      //绘制图表
      ContmyChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "-2%",
          right: "2%",
        },
        series: [
          {
            name: this.PlayingItem.customspassName,
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: arry[1], name: "总人数" },
              {
                value: arry[0],
                name: `完成${this.PlayingItem.customspassName}的人数`,
              },
            ],
          },
        ],
      });
    },
    PersonRank() {
      let username = this.$store.state.LoginData.userformation[0].username;
      this.$http({
        method: "post",
        url: `customspass/selectFinishAndTotalRatioByUsername?username=${username}`,
      }).then(({ data }) => {
        if (data.flag) {
          let arry = data.data;
          arry.forEach((element) => {
            this.allpeople.push(element);
          });
          this.initCharts(arry);
        } else {
          console.log(data);
        }
      });
    },
    //关卡和阶段统计图
    initChart(datas, value) {
      let GuanmyChart = echarts.getInstanceByDom(
        document.getElementById("Chart-Myproject")
      );
      if (GuanmyChart == null) {
        GuanmyChart = echarts.init(document.getElementById("Chart-Myproject"));
      }
      //绘制图表
      GuanmyChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          right:'5%'
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 5],
        },
        yAxis: {
          type: "category",
          data: datas,
        },
        series: [
          {
            name: "按人数计算",
            type: "bar",
            data: value,
            barWidth: "25%",
          },
        ],
      });
    },
    stagesRank() {
      let username = this.$store.state.LoginData.userformation[0].username;
      this.$http({
        method: "post",
        url: `customspass/selectStageFinishByUsername?username=${username}`,
      }).then(({ data }) => {
        if (data.flag) {
          let obj = data.data;
          let stagedatas = Object.getOwnPropertyNames(obj);
          this.stagedatas = Object.getOwnPropertyNames(obj);
          this.stategname = Object.getOwnPropertyNames(obj)[0];
          let arr = [];
          for (let key in obj) {
            arr.push(obj[key]);
          }
          this.initChart(stagedatas, arr);
        } else {
          console.log(data);
        }
      });
    },
    ItemRank(newVal) {
      let username = this.$store.state.LoginData.userformation[0].username;
      this.$http({
        method: "post",
        url: `customspass/selectCustomspassFinishByUsernameAndStageName?username=${username}&stageName=${encodeURIComponent(
          newVal
        )}`,
      }).then(({ data }) => {
        if (data.flag) {
          let obj = data.data;
          // this.itemname = Object.getOwnPropertyNames(obj);
          let itemname = Object.getOwnPropertyNames(obj);
          let arr = [];
          for (let key in obj) {
            arr.push(obj[key]);
          }
          this.initChart(itemname, arr);
        } else {
          // console.log(response.data);
        }
      });
    },
    //延期统计图
    initChart1(Xday, value) {
      let DelaymyChart = echarts.getInstanceByDom(
        document.getElementById("Chart-delay")
      );
      if (DelaymyChart == null) {
        DelaymyChart = echarts.init(document.getElementById("Chart-delay"));
      }
      //绘制图表
      DelaymyChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: Xday,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 5],
        },
        legend: {left: "4%"},
        series: [
          {
            name: "按人数统计",
            data: value,
            type: "bar",
            showBackground: true,
            barWidth: "25%",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
    initDelayweek() {
      let username = this.$store.state.LoginData.userformation[0].username;
      this.$http({
        method: "post",
        url: `customspass/selectCountPostponeByUsernameAndCondition?username=${username}&condition=month`,
      }).then(({ data }) => {
        if (data.flag) {
          let obj = data.data;
          let arr = [];
          for (let key in obj) {
            arr.push(obj[key]);
          }
          this.initChart1(this.delayweek, arr);
        } else {
          console.log(data);
        }
      });
    },
    initDelayday() {
      let username = this.$store.state.LoginData.userformation[0].username;
      this.$http({
        method: "post",
        url: `customspass/selectCountPostponeByUsernameAndCondition?username=${username}&condition=week`,
      }).then(({ data }) => {
        if (data.flag) {
          let obj = data.data;
          this.delayday = Object.getOwnPropertyNames(obj);
          let arr = [];
          for (let key in obj) {
            arr.push(obj[key]);
          }
          this.initChart1(this.delayday, arr);
        } else {
          console.log(data);
        }
      });
    },
    //逾期统计图
    initChart2(Xday, value) {
      let OutmyChart = echarts.getInstanceByDom(
        document.getElementById("Chart-outtime")
      );
      if (OutmyChart == null) {
        OutmyChart = echarts.init(document.getElementById("Chart-outtime"));
      }
      //绘制图表
      OutmyChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: Xday,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 5],
        },
        legend: {
          left: "4%"
        },
        series: [
          {
            name: "按人数计算",
            data: value,
            type: "bar",
            showBackground: true,
            barWidth: "25%",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
    initOuttimeweek() {
      let username = this.$store.state.LoginData.userformation[0].username;
      this.$http({
        method: "post",
        url: `customspass/selectCountOverdueByUsernameAndCondition?username=${username}&condition=month`,
      }).then(({ data }) => {
        if (data.flag) {
          let obj = data.data;
          let arr = [];
          for (let key in obj) {
            arr.push(obj[key]);
          }
          this.initChart2(this.Outtimeweek, arr);
        } else {
          console.log(data);
        }
      });
    },
    initOuttimeday() {
      let username = this.$store.state.LoginData.userformation[0].username;
      this.$http({
        method: "post",
        url: `customspass/selectCountOverdueByUsernameAndCondition?username=${username}&condition=week`,
      }).then(({ data }) => {
        if (data.flag) {
          let obj = data.data;
          this.Outtimeday = Object.getOwnPropertyNames(obj);
          let arr = [];
          for (let key in obj) {
            arr.push(obj[key]);
          }
          this.initChart2(this.Outtimeday, arr);
        } else {
          console.log(data);
        }
      });
    },
    //正在进行的关卡
    Iteming() {
      let username = this.$store.state.LoginData.userformation[0].username;
      this.$http({
        method: "post",
        url: `customspass/selectOngoingCustomspass?username=${username}`,
      }).then(({ data }) => {
        if (data.flag) {
          this.PlayingItem = data.data;
        } else {
          console.log(data.errorMsg);
        }
      });
    },
  },
  mounted() {
    this.Iteming();
    this.PersonRank();
    // this.stagesRank();
    // this.initDelayweek();
    // this.initOuttimeweek();
    //关卡基本信息未完成和已完成
    let username = this.$store.state.LoginData.userformation[0].username;
    this.$http({
      method: "post",
      url: `customspass/selectCountByIncompleteAndFinish?username=${username}`,
    }).then(({ data }) => {
      if (data.flag) {
        this.Nosuccessful = data.data[0];
        this.successful = data.data[1];
      } else {
        console.log(data);
      }
    });
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.el-select-dropdown__item {
  padding: 0 20px;
}
.el-select-dropdown__item:hover {
  background-color: skyblue;
}
.selectsubject option {
  background-color: pink;
}
</style>